<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>生意帮</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>

        html,
        body {
            line-height: 1;
            background: #fff;
        }
        /*轮播图*/

        .lunbotu_one {
            box-shadow: 1px 1px 10px #ccc;
        }

        .lunbotu_one .swiper-pagination-bullet-active {
            background: #f23030;
        }
        /*好货特卖*/

        .hhtm_box {
            position: relative;
            padding: 0 0.5rem;
            background: #fff;
        }

        .hhtm_box .titles_box {
            padding: 0.75rem 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600;
        }

        .hhtm_box .hhtm_lunbotu {
            padding-bottom: 0.5rem;
        }

        .hhtm_box .hhtm_lunbotu .swiper-slide .hhtm_shop_title {
            margin: 0.5rem 0;
            font-size: 0.65rem;
            color: #010101;
            height: 1.45rem;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            /*font-weight: 600;*/
        }

        .hhtm_box .hhtm_lunbotu .swiper-slide .hhtm_shop_jg {
            font-size: 0.7rem;
            color: #f23030;
            margin-bottom: 0.5rem;
            font-family: cursive;
            font-weight: 600;
        }

        .hhtm_box .hhtm_lunbotu .swiper-slide .hhtm_shop_yj {
            font-size: 0.5rem;
            color: #999999;
            text-decoration: line-through;
            font-family: cursive;
        }

        .hhtm_box .hhtm_lunbotu .swiper-slide .hhtm_shop_tip {
            position: absolute;
            top: 0.2rem;
            left: 0.2rem;
        }
        .hhtm_box .hhtm_lunbotu .swiper-slide .hhtm_shop_tip span{
          margin-right: 0.2rem;
        }
        .hhtm_box .hhtm_lunbotu .swiper-slide .hhtm_shop_tip span.tj{
          background: #ff8000;
          font-size: 0.5rem;
          color: #fff;
          /*padding: 0.1rem 0.2rem;*/
          padding: 0.2rem 0.2rem 0.1rem 0.2rem;
          border-radius: 2px;
        }
        .hhtm_box .hhtm_lunbotu .swiper-slide .hhtm_shop_tip span.xp{
          background: #ff8000;
          font-size: 0.5rem;
          color: #fff;
          /*padding: 0.1rem 0.2rem;*/
          padding: 0.2rem 0.2rem 0.1rem 0.2rem;
          border-radius: 2px;
        }
        /*今日上新*/

        .jrsx_box {
            position: relative;
            padding: 0 0.5rem;
            background: #fff;
        }

        .jrsx_box .titles_box {
            padding: 0.75rem 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600;
        }

        .jrsx_box .jrsx_lunbotu {
            padding-bottom: 0.5rem;
        }

        .jrsx_box .jrsx_lunbotu .swiper-slide .jrsx_shop_title {
            margin: 0.5rem 0;
            font-size: 0.65rem;
            color: #010101;
            height: 1.45rem;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            /*font-weight: 600;*/
        }

        .jrsx_box .jrsx_lunbotu .swiper-slide .jrsx_shop_jg {
            font-size: 0.7rem;
            color: #f23030;
            font-family: cursive;
            font-weight: 600;
        }

        .jrsx_shop_tip {
            position: absolute;
            top: 0.2rem;
            left: 0.2rem;

        }
        .jrsx_shop_tip span{
          margin-right: 0.2rem;
        }
        .jrsx_shop_tip span.xp{
          background: #ff8000;
          font-size: 0.5rem;
          color: #fff;
          padding: 0.2rem 0.2rem 0.05rem 0.2rem;
          border-radius: 2px;
        }
        .jrsx_shop_tip span.tj{
          background: #ff8000;
          font-size: 0.5rem;
          color: #fff;
          padding: 0.2rem 0.2rem 0.05rem 0.2rem;
          border-radius: 2px;
        }
        /*精选推荐*/

        .jxtj_box {}

        .jxtj_box .title_img {
            height: auto;
        }

        .jxtj_shop_box {
            background: #f5f5f5;
            padding: 0.3rem 0.2rem 0.1rem 0.2rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .jxtj_shop_box .jxtj_shop_list_box {
            position: relative;
            width: calc(50% - 0.1rem);
            background: #fff;
            margin-bottom: 0.2rem;
            border-radius: 4px;
            padding-bottom: 0.5rem;
            overflow: hidden;
        }

        .jxtj_shop_box .jxtj_shop_list_box .jxtj_shop_title {
            margin: 0.5rem 0;
            font-size: 0.65rem;
            color: #010101;
            height: 1.45rem;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            padding: 0 0.5rem;
        }

        .jxtj_shop_box .jxtj_shop_list_box .jxtj_shop_jg {
            font-size: 0.7rem;
            color: #f23030;
            font-family: cursive;
            font-weight: 600;
            margin-bottom: 0.15rem;
            padding: 0 0.5rem;
        }

        .jxtj_shop_box .jxtj_shop_list_box .jxtj_shop_yj {
            font-family: cursive;
            font-size: 0.5rem;
            text-decoration: line-through;
            color: #999;
            padding: 0 0.5rem;
        }

        .jxtj_shop_box .jxtj_shop_list_box .jxtj_shop_tip {
            position: absolute;
            top: 0.2rem;
            left: 0.2rem;
        }

        .jxtj_shop_box .jxtj_shop_list_box .jxtj_shop_tip span.zp {
            background: #f23030;
            font-size: 0.5rem;
            color: #fff;
            padding: 0.2rem 0.2rem 0.05rem 0.2rem;
            border-radius: 2px;
            margin-right: 0.3rem;
        }

        .jxtj_shop_box .jxtj_shop_list_box .jxtj_shop_tip span.tj {
            background: #ff8000;
            font-size: 0.5rem;
            color: #fff;
            padding: 0.2rem 0.2rem 0.05rem 0.2rem;
            border-radius: 2px;
            margin-right: 0.3rem;
        }
        .jxtj_shop_box .jxtj_shop_list_box .jxtj_shop_tip span.xp {
            background: #ff8000;
            font-size: 0.5rem;
            color: #fff;
            padding: 0.2rem 0.2rem 0.05rem 0.2rem;
            border-radius: 2px;
            margin-right: 0.3rem;
        }
    </style>
</head>

<body>

    <div id="app" v-cloak>
        <div class="aui-refresh-content">

            <!-- 轮播图 -->
            <div id="pro1-swiper" class="swiper-container lunbotu_one">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" @click="openWindow('', item.goodsId)" v-for="item in banner" :style="'background:url('+item.pic+') no-repeat center; background-size:cover;height:9.5rem;'"></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>


            <!-- 好货特卖 -->
            <div class="hhtm_box" v-if="goods_recommend.length > 0">

                <div class="titles_box">
                    好货特卖
                </div>

                <!-- 好货特卖轮播图 -->

                <div id="pro2-swiper" class="swiper-container hhtm_lunbotu">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" @click='openWindow(item.goods_name, item.goods_id)' v-for="item in goods_recommend">
                            <div class="hhtm_shop_img" :style="'background:url('+item.logo_pic+') no-repeat center; background-size:cover;height:5.75rem;border-radius:4px;'"></div>
                            <div class="hhtm_shop_title">{{item.goods_name}}</div>
                            <div class="hhtm_shop_jg">¥ {{item.price}}</div>
                            <div class="hhtm_shop_yj">¥ {{item.oprice}}</div>
                            <div class="hhtm_shop_tip"><span class="tj" v-if="item.is_show == 1">推荐</span><span class="xp" v-if="item.is_new == 1">新品</span></div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="line" style="height:0.5rem;background:#f5f5f5;" v-if="goods_recommend.length > 0"></div>


            <!-- 今日上新 -->
            <div class="jrsx_box" v-if="goods_today.length > 0">

                <div class="titles_box">
                      今日上新
                </div>

                <!-- 今日上新轮播图 -->

                <div id="pro3-swiper" class="swiper-container jrsx_lunbotu">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" @click='openWindow(item.goods_name, item.goods_id)' v-for="(item,index) in goods_today">
                            <div class="jrsx_shop_img" :style="'background:url('+item.logo_pic+') no-repeat center; background-size:cover;height:5.75rem;border-radius:4px;'"></div>
                            <div class="jrsx_shop_title">{{item.goods_name}}</div>
                            <div class="jrsx_shop_jg">￥{{item.price}}</div>
                            <div class="jrsx_shop_tip"><span class="xp" v-if="item.is_new == 1">新品</span><span class="tj" v-if="item.is_show == 1">推荐</span></div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="line" style="height:0.5rem;background:#f5f5f5;" v-if="goods_today.length > 0"></div>

            <!-- 精选推荐 -->
            <div class="jxtj_box">

                <div class="title_img">
                    <img src="../../image/tuijian_home.jpg" width="100%" />
                </div>

                <div class="jxtj_shop_box">

                    <div class="jxtj_shop_list_box" v-for="item in goodsList" @click='openWindow(item.goods_name, item.goods_id)'>
                        <div class="jxtj_shop_img" :style="'background:url('+item.logo_pic+') no-repeat center; background-size:cover;'"></div>
                        <div class="jxtj_shop_title">{{item.goods_name}}</div>
                        <div class="jxtj_shop_jg">¥{{item.price}}</div>
                        <div class="jxtj_shop_yj">￥{{item.oprice}}</div>
                        <div class="jxtj_shop_tip"><span class='zp' v-if='item.including_gifts==1'>含赠品</span><span class="tj">推荐</span><span class="xp" v-if='item.is_new==1'>新品</span></div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript" src="../../script/aui-lazyload.js"></script>
<script type="text/javascript">
    var vm;
    apiready = function() {
        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        vm = new Vue({
            el: '#app',
            data: {
                banner: [], //banner列表
                goods_recommend: [], //推荐列表
                goods_today: [], //今日上新列表
                exchange_goods: [], //兑换商品列表
                page: 1,
                totalpage: 1,
                goodsList: [],
                cate_Id: ""
            },
            created: function() {
                var $_this = this;
                api.ajax({
                    url: window.Url.Freesource_index,
                    method: 'post',
                    data: {
                        values: {
                            type: 2,
                            token: $api.getStorage('token'),
                            cateId: $_this.cate_Id
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        // console.log('分销区商品----'+JSON.stringify(ret));
                        $_this.banner = ret.data.banner
                        $_this.goods_recommend = ret.data.goods_recommend;
                        $_this.goods_today = ret.data.goods_today
                        console.log(JSON.stringify($_this.goods_today));
                        $_this.exchange_goods = ret.data.exchange_goods
                        $_this.$nextTick(function() {

                            // 轮播图
                            var bannerSwiper = new Swiper('#pro1-swiper', {
                                autoplay: 3000,
                                loop: true,
                                pagination: '.swiper-pagination'
                            })


                            // 好货特卖轮播图

                            var hhtm_swiper = new Swiper('#pro2-swiper', {
                                slidesPerView: 2.5,
                                spaceBetween: 10,
                                freeMode: true
                            })
                            $('.hhtm_shop_img').height($('.hhtm_shop_img').width())

                            // 今日上新轮播图
                            var jrsx_swiper = new Swiper('#pro3-swiper', {
                                slidesPerView: 2.5,
                                spaceBetween: 10,
                                freeMode: true
                            })
                            $('.jrsx_shop_img').height($('.jrsx_shop_img').width())
                            // 精选推荐商品图片
                              $('.jxtj_shop_img').height($('.jxtj_shop_img').width())


                        })
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })
                api.ajax({
                    url: window.Url.Freegoods_goodsList,
                    method: 'post',
                    data: {
                        values: {
                            type: 2,
                            page: $_this.page,
                            cateId: $_this.cate_Id
                        }
                    }
                }, function(ret, err) {
                    if (ret.re == 1) {
                        $_this.goodsList = ret.data.list
                        $_this.totalpage = ret.data.sum_page
                        $_this.$nextTick(function() {
                          // 精选推荐商品图片
                            $('.jxtj_shop_img').height($('.jxtj_shop_img').width())
                        })

                    } else {
                        api.toast({
                            msg: ret.info,
                            duration: 2000,
                            location: 'bottom'
                        });

                    }
                })
                var scroll = new auiScroll({
                    listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
                    distance: 40 //判断到达底部的距离，isToBottom为true
                }, function(ret) {
                    if (ret.isToBottom) {
                        $_this.page++
                            if ($_this.page > $_this.totalpage) {
                                $_this.page = $_this.totalpage
                                return
                            }
                        api.ajax({
                            url: window.Url.Freegoods_goodsList,
                            timeout: 300,
                            method: 'post',
                            data: {
                                values: {
                                    type: 2,
                                    page: $_this.page,
                                    cateId: $_this.cate_Id
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                              if(ret.re==1){
                                $_this.goodsList = $_this.newsList.concat(ret.data.list)
                              }

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    }

                })
            },
            methods: {
                openWindow: function(name, id) {
                    api.openWin({
                        name: 'commodity',
                        url: './commodity.html',
                        pageParam: {
                            name: name,
                            id: id
                        }
                    });

                },
                getFreesourceIndex: function(cateId) {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Freesource_index,
                        method: 'post',
                        data: {
                            values: {
                                type: 2,
                                token: $api.getStorage('token'),
                                cateId: cateId
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // console.log(JSON.stringify(ret.data))
                            $_this.banner = ret.data.banner
                            $_this.goods_recommend = ret.data.goods_recommend
                            $_this.goods_today = ret.data.goods_today
                            $_this.exchange_goods = ret.data.exchange_goods
                            $_this.$nextTick(function() {

                                // 轮播图
                                var bannerSwiper = new Swiper('#pro1-swiper', {
                                    autoplay: 3000,
                                    loop: true,
                                    pagination: '.swiper-pagination'
                                })

                                // 好货特卖轮播图

                                var hhtm_swiper = new Swiper('#pro2-swiper', {
                                    slidesPerView: 2.5,
                                    spaceBetween: 10,
                                    freeMode: true
                                })
                                $('.hhtm_shop_img').height($('.hhtm_shop_img').width())

                                // 今日上新轮播图
                                var jrsx_swiper = new Swiper('#pro3-swiper', {
                                    slidesPerView: 2.5,
                                    spaceBetween: 10,
                                    freeMode: true
                                })
                                $('.jrsx_shop_img').height($('.jrsx_shop_img').width())

                                // 精选推荐商品图片
                                  $('.jxtj_shop_img').height($('.jxtj_shop_img').width())

                            })
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })


                },
                getFreegoodsGoodsList: function(cateId) {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Freegoods_goodsList,
                        method: 'post',
                        data: {
                            values: {
                                type: 2,
                                page: 1,
                                cateId: cateId
                            }
                        }
                    }, function(ret, err) {
                        if (ret.re == 1) {
                            $_this.goodsList = '';
                            $_this.totalpage = '';
                            $_this.goodsList = ret.data.list
                            $_this.totalpage = ret.data.sum_page

                            $_this.$nextTick(function() {
                              // 精选推荐商品图片
                                $('.jxtj_shop_img').height($('.jxtj_shop_img').width())
                            })

                        } else {
                            $_this.goodsList = '';
                            api.toast({
                                msg: ret.info,
                                duration: 2000,
                                location: 'bottom'
                            });

                        }
                    })

                },
                openDetail2: function(type, name) {
                    api.openWin({
                            name: type,
                            url: './one_frame_header.html',
                            pageParam: {
                                type: type,
                                name: name
                            }
                        })
                },
            },
            mounted: function() {
                var $_this = this;
                api.hideProgress()
                var pullRefresh = new auiPullToRefresh({
                    container: document.querySelector('.aui-refresh-content'),
                    triggerDistance: 100
                }, function(ret) {
                    if (ret.status == "success") {
                        api.ajax({
                            url: window.Url.Freesource_index,
                            method: 'post',
                            data: {
                                values: {
                                    type: 2,
                                    token: $api.getStorage('token'),
                                    cateId: $_this.cate_Id
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                // console.log( JSON.stringify(ret.data))
                                $_this.banner = ret.data.banner
                                $_this.goods_recommend = ret.data.goods_recommend
                                $_this.goods_today = ret.data.goods_today
                                $_this.exchange_goods = ret.data.exchange_goods
                                $_this.$nextTick(function() {

                                    // 轮播图
                                    var bannerSwiper = new Swiper('#pro1-swiper', {
                                        autoplay: 3000,
                                        loop: true,
                                        pagination: '.swiper-pagination'
                                    })

                                    // 好货特卖轮播图
                                    var hhtm_swiper = new Swiper('#pro2-swiper', {
                                        slidesPerView: 2.5,
                                        spaceBetween: 10,
                                        freeMode: true
                                    })
                                    $('.hhtm_shop_img').height($('.hhtm_shop_img').width())

                                    // 今日上新轮播图
                                    var jrsx_swiper = new Swiper('#pro3-swiper', {
                                        slidesPerView: 2.5,
                                        spaceBetween: 10,
                                        freeMode: true
                                    })
                                    $('.jrsx_shop_img').height($('.jrsx_shop_img').width())

                                    // 精选推荐商品图片
                                      $('.jxtj_shop_img').height($('.jxtj_shop_img').width())
                                })
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                        api.ajax({
                            url: window.Url.Freegoods_goodsList,
                            method: 'post',
                            data: {
                                values: {
                                    type: 2,
                                    page: $_this.page,
                                    cateId: $_this.cate_Id
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {

                              if(ret.re==1){


                                $_this.$nextTick(function() {
                                  // 精选推荐商品图片
                                  $('.jxtj_shop_img').height($('.jxtj_shop_img').width())
                                  $_this.goodsList = ret.data.list
                                  $_this.totalpage = ret.data.sum_page
                                  setTimeout(function() {
                                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                                  }, 500)
                                })
                              }

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })

                    }
                })
            }
        })
    }

    function test1(cateId) {
        vm.getFreesourceIndex(cateId);
        vm.getFreegoodsGoodsList(cateId);
        vm.cate_Id = cateId;
        // alert(cateId)
    }
</script>

</html>
